<template>
  <div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <router-link v-for="item in nearByList"
                 :key="item._id"
                 :to="`/shop/${item._id}`">
      <ShopInfo :item="item"/>
    </router-link>

  </div>
</template>

<script>
import {ref} from 'vue'
import {get} from "@/utils/require"
import ShopInfo from "@/components/ShopInfo.vue";

const useNearbyListEffect = () => {
  const nearByList = ref([]);
  const getNearbyList = async () => {
    const result = await get('/hotlist.php');
    if (result?.errno == 0 && result?.data?.length) {
      nearByList.value = result.data
    }
  }
  return {nearByList, getNearbyList}
}
export default {
  name: "NearBy",
  components: {ShopInfo},
  setup() {
    const {nearByList, getNearbyList} = useNearbyListEffect()
    getNearbyList();
    return {nearByList};
  }
}
</script>

<style lang="scss" scoped>
@use "@/style/viriables" as *;
@use "@/style/mixins" as *;

.nearby {
  &__title {
    margin: .16rem 0 .02rem 0;
    font-size: .18rem;
    font-weight: normal;
    color: $content-fontcolor;
  }

  a {
    text-decoration: none;
  }
}
</style>